// 导入React核心库及自定义钩子（useState：状态管理，useRef：DOM引用，useEffect：副作用处理）
import React, { useState, useRef, useEffect } from 'react';
// 导入组件样式文件（控制翻转容器、进度条等样式）
import './ImageFlip.css';

// 定义组件属性接口（描述组件接收的props类型）
interface ImageFlipProps {
  images?: string[]; // 可选属性：图片URL数组（用于展示翻转效果）
  currentPage?: number; // 可选属性：当前显示的页码（外部控制）
  onPageChange?: (page: number) => void; // 可选属性：页码变化时的回调函数
  loading?: boolean; // 可选属性：加载状态（控制加载提示）
}

// 定义图片翻转组件（接收ImageFlipProps类型的属性）
const ImageFlip: React.FC<ImageFlipProps> = ({
  images = [], // 默认值：空数组（避免undefined导致的渲染错误）
  currentPage = 0, // 默认值：初始显示第0页（索引从0开始）
  onPageChange, // 页码变化回调（由父组件传入）
  loading = false // 默认值：非加载状态
}) => {
  // 安全处理图片数组（避免images为undefined时的错误）
  const safeImages = images || [];

  // 状态管理：
  // 当前显示的图片索引（内部状态，受外部currentPage影响）
  const [currentIndex, setCurrentIndex] = useState(currentPage);
  // 是否显示页码指示器（控制鼠标悬停时的提示）
  const [showIndicator, setShowIndicator] = useState(false);
  // 容器DOM引用（用于获取容器尺寸和位置）
  const containerRef = useRef<HTMLDivElement>(null);
  // 所有图片是否加载完成（控制加载状态提示）
  const [allLoaded, setAllLoaded] = useState(false);

  // 副作用：确保当前索引在有效范围内（图片数组长度变化或索引越界时触发）
  useEffect(() => {
    if (safeImages.length === 0) return; // 无图片时不处理

    const maxIndex = safeImages.length - 1; // 最大有效索引（数组最后一个元素）
    // 索引越界时修正：超过最大值则设为最大值，小于0则设为0
    if (currentIndex > maxIndex) {
      setCurrentIndex(maxIndex);
    } else if (currentIndex < 0) {
      setCurrentIndex(0);
    }
  }, [safeImages.length, currentIndex]); // 依赖：图片数量和当前索引

  // 副作用：外部currentPage变化时同步更新内部currentIndex（实现受控组件）
  useEffect(() => {
    setCurrentIndex(currentPage);
  }, [currentPage]); // 依赖：外部传入的currentPage

  // 副作用：当前索引变化时触发页码变化回调（通知父组件页码更新）
  useEffect(() => {
    if (onPageChange) { // 仅当回调存在时执行
      onPageChange(currentIndex); // 传递当前索引（页码）给父组件
    }
  }, [currentIndex, onPageChange]); // 依赖：当前索引和回调函数

  // 副作用：预加载所有图片并检测加载完成状态（图片数组变化时触发）
  useEffect(() => {
    if (!safeImages || safeImages.length === 0) return; // 无图片时不处理

    let loaded = 0; // 已加载图片计数器
    setAllLoaded(false); // 重置加载完成状态

    // 遍历所有图片URL，创建Image对象预加载
    safeImages.forEach(src => {
      const img = new window.Image(); // 创建图片对象
      img.src = src; // 设置图片地址
      // 图片加载完成或加载失败时触发
      img.onload = img.onerror = () => {
        loaded += 1; // 已加载计数+1
        // 所有图片加载完成时更新状态
        if (loaded === safeImages.length) {
          setAllLoaded(true); // 标记所有图片加载完成
        }
      };
    });
  }, [safeImages]); // 依赖：安全图片数组

  // 计算进度条宽度（根据当前索引和总图片数动态调整）
  const progressBarWidth = safeImages.length > 0
    ? ((currentIndex + 1) / safeImages.length) * 100 // 百分比计算（当前页/总页数）
    : 0; // 无图片时宽度为0

  // 鼠标在容器内移动时的事件处理（切换图片）
  const handleMouseMoveZone = (e: React.MouseEvent) => {
    // 条件判断：容器存在、有图片、非加载中、所有图片已加载时才允许切换
    if (!containerRef.current || safeImages.length === 0 || loading || !allLoaded) return;

    const rect = containerRef.current.getBoundingClientRect(); // 获取容器位置和尺寸
    const x = e.clientX - rect.left; // 鼠标相对于容器左侧的X坐标（像素）
    const width = rect.width; // 容器宽度（像素）
    // 计算目标索引：根据鼠标位置百分比映射到图片数组索引
    const idx = Math.min(
      safeImages.length - 1, // 不超过最大索引
      Math.max(0, Math.floor((x / width) * safeImages.length)) // 不小于0
    );
    // 索引变化时更新当前索引（触发图片切换）
    if (idx !== currentIndex) {
      setCurrentIndex(idx);
    }
    setShowIndicator(true); // 显示页码指示器
  };

  // 鼠标离开容器时的事件处理（隐藏指示器）
  const handleMouseLeaveZone = () => {
    setShowIndicator(false); // 隐藏页码指示器
  };

  // 鼠标点击容器时的事件处理（翻页）
  const handleClick = (e: React.MouseEvent) => {
    // 条件判断：容器存在、有图片、非加载中、所有图片已加载时才允许翻页
    if (!containerRef.current || safeImages.length === 0 || loading || !allLoaded) return;

    const rect = containerRef.current.getBoundingClientRect(); // 获取容器位置和尺寸
    const x = e.clientX - rect.left; // 鼠标相对于容器左侧的X坐标（像素）
    const width = rect.width; // 容器宽度（像素）
    const halfWidth = width / 2; // 容器中间位置（像素）
    // 计算上一页/下一页索引（左半区点击上一页，右半区点击下一页）
    const prevPage = Math.max(currentIndex - 1, 0); // 上一页（不小于0）
    const nextPage = Math.min(currentIndex + 1, safeImages.length - 1); // 下一页（不超过最大值）
    setCurrentIndex(x < halfWidth ? prevPage : nextPage); // 根据点击位置更新索引
  };

  // 计算页码指示器文本（显示当前页/总页数）
  const indicatorText = safeImages.length > 0
    ? `${currentIndex + 1}/${safeImages.length}` // 有图片时显示具体页码
    : '0/0'; // 无图片时显示0/0

  // 渲染主内容（加载状态、空状态或图片）
  const renderContent = () => {
    if (loading || !allLoaded) { // 加载中或未全部加载完成时
      return (
        <div className="loading-overlay">
          <div className="loading-spinner"></div> {/* 加载旋转图标 */}
          <div className="loading-text">图片加载中...</div> {/* 加载提示文本 */}
        </div>
      );
    }
    if (safeImages.length === 0) { // 无图片时
      return (
        <div className="empty-state">
          <div className="empty-icon">📷</div> {/* 空状态图标（相机符号） */}
          <div className="empty-text">暂无图片</div> {/* 空状态提示文本 */}
        </div>
      );
    }
    // 正常显示图片（当前索引对应的图片）
    return (
      <img
        src={safeImages[currentIndex]} // 图片地址（当前索引对应的URL）
        alt={`Slide ${currentIndex + 1}`} // 图片描述（当前页+1）
        className="image-content" // 关联图片样式类
        onError={(e) => { // 图片加载失败时的处理
          const target = e.target as HTMLImageElement;
          target.style.opacity = '0'; // 隐藏加载失败的图片（避免显示断裂图）
        }}
      />
    );
  };

  // 组件最终渲染结构
  return (
    <div
      ref={containerRef} // 关联容器DOM引用
      className="image-flip-container" // 关联容器样式类
      onMouseMove={handleMouseMoveZone} // 鼠标移动事件（切换图片）
      onMouseLeave={handleMouseLeaveZone} // 鼠标离开事件（隐藏指示器）
      onClick={handleClick} // 鼠标点击事件（翻页）
      style={{ position: 'relative' }} // 相对定位（用于子元素绝对定位）
    >
      {/* 主内容区域（加载提示/空状态/图片） */}
      {renderContent()}

      {/* 进度条（显示当前页占总页数的比例） */}
      <div className="progress-bar">
        <div
          className="progress"
          style={{ width: `${progressBarWidth}%` }} // 宽度由progressBarWidth计算值控制
        />
      </div>

      {/* 左下角页码指示器（鼠标悬停时显示） */}
      <div className={`page-indicator ${showIndicator ? 'visible' : ''}`}>
        <span>{indicatorText}</span> {/* 显示当前页/总页数 */}
      </div>

      {/* 右上角设计者信息（固定显示） */}
      <div className="designer-indicator">MOGU设计</div>
    </div>
  );
};

// 导出组件供其他文件引用（作为图片翻转功能的入口）
export default ImageFlip;